<template>
  <a-drawer
    v-model:open="open"
    title="权限查看"
    placement="right"
    width="618"
    class="drawer"
  >
    <template #extra>
      <a-tag
        style="margin-right: 400px"
        :color="formRole.isActivated === 1 ? 'green' : 'default'"
      >
        {{ formRole.isActivated === 1 ? '已发布' : '未发布' }}
      </a-tag>
    </template>

    <div class="container">
      <div class="item">
        <span class="label">用户名：</span>
        <div class="content">
          <span tyle="margin-right: 5px">{{ formRole.userName }}</span>
        </div>
      </div>
      <div class="item">
        <span class="label">角色名称：</span>
        <div class="content">
          <a-radio-group v-model:value="selectedRole">
            <a-radio :value="item" v-for="item in formRole.roleList">{{
              item
            }}</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="item">
        <span class="label">角色描述：</span>
        <div class="content">
          <span style="margin-right: 5px">{{ formRole.roleDesc }}</span>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 9px">
      <span class="label">权限配置：</span>
    </div>
    <div class="table-content">
      <view-table :table-data="tableData" :loading="loading" />
    </div>
  </a-drawer>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'
import { getRoleByName } from '@/api/role.js'
import { useVModel } from '@vueuse/core'
import ViewTable from '../components/role-view-table.vue'

/**
 * 外部参数
 */
let props = defineProps({
  open: { type: Boolean, default: () => true },
  contextData: { type: Object, default: () => {} },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:open'])
/**
 * 双向绑定
 */
let open = useVModel(props, 'open', emit)
let tableData = ref([])
let formRole = reactive({
  userName: undefined,
  isActivated: undefined,
  roleList: undefined,
})
let selectedRole = ref()
let loading = ref(false)
watch(selectedRole, newSelected => {
  tableData.value = []
  loading.value = true
  if (newSelected) {
    getRoleByName({ roleName: newSelected })
      .then(result => {
        tableData.value = result?.data?.data
        formRole.roleDesc = result?.data?.roleDesc
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
})

watch(
  () => props.contextData,
  contextData => {
    formRole.userName = contextData.userName
    formRole.isActivated = contextData.isActivated
    formRole.roleList = contextData.roleList
    if (formRole.roleList && formRole.roleList[0]) {
      selectedRole.value = formRole.roleList[0]
    }
  },
  { deep: true, immediate: true },
)
</script>
<style lang="less" scoped>
.table-content {
  overflow-y: hidden;
}
.role-table-cell {
  display: flex;
  justify-content: space-between;
}
.container {
  display: flex;
  flex-direction: column;
  font-family: PingFangSC-Regular;
  .item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 16px;
  }
}
.label {
  width: 70px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
}
.drawer-title {
  display: flex;
  align-items: center;
}
:deep(.ant-radio-wrapper) {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
}
</style>
